<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <p v-hello v-if="flag">{{msg}}</p> -->
        <button @click="msg='欢迎'">修改msg</button>
        <!-- Vue中不能手动解绑指令，但当DOM元素被移除时自动解绑 -->
        <button @click="flag=false">解绑指令</button>
        <hr>

        <!-- <p v-world:[aa].bb.cc="msg">{{msg}}</p> -->
        <button @click="aa='mouseout'">修改参数</button>
        <hr>

        <p v-simple>{{msg}}</p>
        <hr>

        <input type="text" v-focus v-input>
    </div>
</body>
<script>
    /*
     * 自定义全局指令
     * 注：使用指令时必须在指令名称前添加前缀v-，即 v-指令名称
     */
    // 提供了五个钩子函数，在不同的时机会执行 
    Vue.directive('hello',{
        bind(){ // 常用！！
            console.log('指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作');
        },
        inserted(){
            console.log('被绑定元素插入到DOM中时调用');
        },
        update(){
            console.log('被绑定元素所在节点更新时调用');
        },
        componentUpdated(){
            console.log('被绑定元素所在节点以及子节点全部更新后调用');
        },
        unbind(){
            console.log('指令与元素解绑时调用，只调用一次');
        }
    });

    // 钩子函数的参数
    Vue.directive('world',{
        bind(el,binding){
            console.log(el);
            console.log(binding);
        },
        update(el,binding,vnode,oldVnode){
            console.log(binding);
            console.log(vnode);
            console.log(oldVnode);
        }
    });

    // 函数简写，当只关心bind和update钩子时，且执行相同操作
    Vue.directive('simple',function(el,binding,vnode,oldVnode){
        console.log(el);
    });

    
    new Vue({
        el:'#app',
        data:{
            msg:'welcome',
            flag:true,
            aa:'mouseover'
        },
        directives:{ // 自定义局部指令
            focus:{
                inserted(el){
                    el.focus();
                }
            },
            input:function(el,binding,vnode,oldVnode){
                console.log('v-input');
            }
        }
    });
</script>
</html>